<html>
<head>
    <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
    <style>
		.menu {font-weight:bold; font-size:1em; padding:2em}
		tr {line-height:2.5em}
	</style>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

</head>
<body>
<style type="text/css">
	body{
		background: url("./pic/lu.jpg") no-repeat center center fixed;
                /*兼容浏览器版本*/
                -webkit-background-size: cover;
                -o-background-size: cover;
                background-size: cover;
	}
</style>
<div style='text-align:center;padding:0.7em'><h1>信息查询</h1></div>
<center>
    <button onclick="doSearch()">搜索</button>
    <input type="text" id="searchInput"></input>
    <br><br>
    <table style='width:70%' border='0' cellpadding='10'>
        <tr style='background-color:#336699;color:#ffffff'>
            <th>姓名</th>
            <th>科目</th>
            <th>建议</th>
        </tr>
        <tbody id="Table" >
        </tbody>
    </table>

    <script>

    </script>
</center>
</body>

<script lang="javascript">
    function doSearch() {
        var key = $("#searchInput").val();
        console.log(key);

        $.ajax({
            url: "./ExperienceRefer?key=" + key,
            method: "GET",
            dataType: "json"
        }).done(function(result){
            update(result.experiences);
        }).fail(function(xhr, status){
            console.log(status);
        });

        console.log("button clicked!");
    }

    function update(experiences) {
        var t = $("#Table");
        t.empty();

        for (var i=0; i<experiences.length; i++) {
            var b = experiences[i];
            var tr = i % 2 == 0 ? $("<tr></tr>") : $("<tr style='background-color:#eee'></tr>");
            tr.append("<td>" + b.name + "</td>");
            tr.append("<td>" + b.course + "</td>");
            tr.append("<textarea>" + b.advice + "</textarea>");
            t.append(tr);
        }
    }
</script>
</html>

